<template>
  <div class="hystag">

    <!--  头部搜索  -->
    <div class="head">
      <el-form :inline="true" ref="form" :model="selectForm" label-width="80px">
        <el-form-item label="标签名称">
          <el-input placeholder="请输入标签名称" v-model="selectForm.title"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="select">查 询</el-button>
          <el-button>取 消</el-button>
        </el-form-item>
      </el-form>
      <div class="head-btn">
        <el-button type="primary" @click="showDialog">新增标签</el-button>
      </div>
    </div>

    <!--  表单  -->
    <div class="body" >
      <el-table
        v-loading="isLoading"
        :stripe="true"
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="title"
          label="标签名称"
          align="center">
        </el-table-column>
        <el-table-column
          prop="gmt_create"
          label="创建时间"
          align="center">
          <template slot-scope="scope">{{ scope.row.gmt_create | dateFormat }}</template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="是否禁用"
          align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.is_disabled" type="danger">禁用</el-tag>
            <el-tag v-else type="=success">启用</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="操作"
          align="center">
          <template slot-scope="scope">
            <el-button type="success" @click="editTableData(scope.row)">编辑</el-button>
            <el-button type="danger" @click="deleteItem(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="body-page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </div>
    </div>

    <!--  弹出框  -->
    <el-dialog title="新增标签" :visible.sync="dialogVisible" :before-close="handleClose" width="600px">

      <el-form :model="dialogForm" :rules="dialogFormRules" ref="dialogForm">
        <el-form-item label="活动名称：" label-width="100px" prop="title">
          <el-input v-model="dialogForm.title" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="是否启用：" label-width="100px">
          <el-switch
            v-model="dialogForm.is_disabled"
            active-color="#ff4949"
            inactive-color="#13ce66"
            active-text="禁用"
            inactive-text="启用">
          </el-switch>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCancel('dialogForm')">取 消</el-button>
        <el-button v-if="dialogStatus === 'create'" type="primary" @click="dialogSubmit('dialogForm')">确 定</el-button>
        <el-button v-else type="primary" @click="editSubmit('dialogForm')">确 定</el-button>
      </div>

    </el-dialog>

  </div>
</template>

<script>
import {getTag, addTag, deleteTag, editTag} from "@/api/tag";
import {getUserInfo} from "@/utils/auth";

export default {
  name: "index",

  async created() {
    await this.fetch(this.page.currentPage,this.page.pageSize)
  },


  data() {
    return {

      selectForm: {},
      tableData: [],
      isLoading: true,
      //弹出框相关参数
      dialogVisible: false,
      dialogForm: {},
      dialogFormRules: {
        title: [
          {required: true, message: '请输入活动名称', trigger: 'blur'},
          {min: 2, max: 6, message: '长度必须在 2 到 6 个字符之间', trigger: 'blur'}
        ]
      },
      dialogStatus: 'create',

      //分页相关
      page:{
        pageSize:10,
        currentPage:1,
        total:0,
      }
    }
  },
  methods: {
    async fetch(page,size) {
      this.isLoading = true
      const res = await getTag(2, {page, size});
      this.tableData = res.data.labels.records
      this.page.total = res.data.labels.total
      this.isLoading = false
    },

    select() {

    },

    //  翻页相关
    async handleSizeChange(pageSize) {
      this.isLoading = true
      this.page.pageSize = pageSize
      await this.fetch(1,this.page.pageSize)
      this.isLoading = false
    },
    async handleCurrentChange(currentPage) {
      this.isLoading = true
      this.currentPage = currentPage
      await this.fetch(currentPage,this.page.pageSize)
      this.isLoading = false
    },

    //表格相关
    deleteItem(row) {

      this.$confirm('此操作将删除该标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await deleteTag(2, {
          id: row.id,
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        await this.fetch(this.page.currentPage,this.page.pageSize)
      }).catch((err) => {
        console.log(err)
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    editTableData(row) {
      this.dialogVisible = true
      this.dialogForm = JSON.parse(JSON.stringify(row))
      this.dialogStatus = 'edit'
    },
    switchChange(val) {
      console.log(val)
    },

    //弹出框相关
    showDialog() {
      this.dialogStatus = 'create'
      this.dialogVisible = true
    },
    handleClose() {

    },
    dialogCancel(formName) {
      this.dialogForm = {}
      this.dialogVisible = false
    },
    dialogSubmit(formName) {
      this.$refs[formName].validate(async (valid) => {

        if (valid) {
          const res = await addTag(2, this.dialogForm)
          this.$message({
            message: '添加成功',
            type: 'success'
          });
          this.dialogVisible = false
          this.dialogForm = {}
          await this.fetch(this.page.currentPage,this.page.pageSize)

        } else {
          this.$message({
            message: '表格未完善',
            type: 'warning'
          });
          return false;
        }
      });
    },
    editSubmit(formName) {
      this.$refs[formName].validate(async (valid) => {

        if (valid) {
          const res = await editTag(2, {
            id: this.dialogForm.id,
            title: this.dialogForm.title,
          })
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.dialogVisible = false
          this.dialogForm = {}
          await this.fetch(this.page.currentPage,this.page.pageSize)
        } else {
          this.$message({
            message: '资料未完善',
            type: 'warning'
          });
          return false;
        }

      });
    }
  }

}
</script>

<style lang="scss" scoped>
.hystag {
  padding: 10px;
  min-height: 100vh;

  .head {
    display: flex;
    justify-content: space-between;
    background-color: white;
    margin-top: 10px;
    padding: 30px 10px 10px 10px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

    .head-btn {
      margin-right: 10px;
    }
  }

  .body {
    padding: 20px 0px;
    background-color: white;
    margin-top: 20px;
    //padding: 10px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

    .body-page {
      text-align: center;
      margin-top: 30px;
    }
  }
}
</style>
